<template>
    <div class="eBox">
        <div id="echart1" class="echart"></div>
        <div id="echart2" class="echart"></div>
        <div id="echart3" class="echart"></div>
        <div id="echart4" class="echart"></div>
    </div>
</template>


<script>
    import {
        shallowRef
    } from 'vue'
    import * as echarts from 'echarts';
    import {
        getData
    } from '../api/cha.js'
    export default {
        data() {
            return {
                charts: [
                    {
                        chart: shallowRef(),
                        name: "bar",
                        title: "柱状图"
                    },
                    {
                        chart: shallowRef(),
                        name: "scatter",
                        title: "散点图"
                    },
                    {
                        chart: shallowRef(),
                        name: "line",
                        title: "折线图"
                    },
                    {
                        chart: shallowRef(),
                    }
                ],

                options: {
                    option1: {
                        title: {
                            text: '',
                        },
                        xAxis: {
                            type: 'category',
                            data: []
                        },
                        yAxis: {
                            type: 'value'
                        },
                        tooltip:{},
                        series: [{
                            data: [],
                            type: '',
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(180, 180, 180, 0.2)'
                            }
                        }]
                    },
                    option4: {
                        title: {
                            text: "饼图"
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            top: '5%',
                            left: 'center'
                        },
                        tooltip:{},
                        series: [{
                            name: 'Access From',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: 40,
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: []
                        }]
                    }
                },

            }
        },
        watch: {
            'options.option1':{
                deep: true,
                handler(n) {
                    let data = JSON.parse(JSON.stringify(n));
                    this.charts.forEach((item,index)=>{
                        if(index < 3){
                            data.title.text = item.title;
                            data.series[0].type = item.name;
                            item.chart.setOption(data)
                        }
                    })
                }
            },
            'options.option4': {
                deep: true,
                handler(n) {
                    this.charts[3].chart.setOption(n)
                }
            },
        },
        async created() {
            let data = await getData();

            // 改变配置1的数据
            this.options.option1.xAxis.data = data.data.map(item=>item.x)
            this.options.option1.series[0].data = data.data.map(item=>item.val)
            // 改变配置2的数据
            this.options.option4.series[0].data = data.data.map(item => {
                return {
                    value: item.val,
                    name: item.x
                }
            });

        },
        mounted() {
            // 进行容器挂载
            this.charts.forEach((item,index)=>{
                item.chart = echarts.init(document.querySelector(`#echart${index+1}`))
            })
            window.addEventListener('resize', this.onResize)
        },
        unmounted() {
            window.removeEventListener('resize', this.onResize)
        },
        methods: {
            onResize() {
                // echarts 尺寸调整
                this.charts.forEach(item=>item.chart.resize())
            }
        }
    }
</script>

<style scoped>
    .eBox {
        width: 100%;
        display: flex;
        justify-content: space-around;
        height: 100%;
        flex-flow: row wrap
    }

    .echart {
        width: 45%;
        margin-bottom: 10px;
        height: 270px;
        background-color: rgb(0, 0, 0, 0.1);
    }
</style>